<template>
  <h1>{{ hellText }}</h1>

  <button @click="onAddCount">count is: {{ count }}</button>
  <p>
    Edit
    <code>components/HelloWorld.vue</code> to test hot module replacement.
  </p>
</template>

<script>

function getData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(Math.floor(Math.random() * 100))
    }, 2000)
  })
}

export default {
  props: ['msg'],
  data() {
    return {
      count: 0,
      name: 'jirengu'
    }
  },
  methods: {
    async getCount() {
      this.count = await getData()
    },
    onAddCount() {
      this.count++
    }
  },
  computed: {
    hellText() {
      return  this.msg + ' ' + this.name 
    }
  },
  mounted() {
    this.getCount()
  }
}


</script>

<style scoped>
a {
  color: #42b983;
}
</style>
